<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
            <title>FOSS World Monitor</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <!--style type="text/css">
                    body { min-width: 200px; }
                    #c { border: 1px solid #333; width: 100%; height: 240px; }
                    #btn { width: 100%; height: 50px; }
                    </style-->
                
                <link rel="stylesheet" href="style2.css">
                <!--script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script-->
                <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
                
                <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
                <script type="text/javascript" src="infobubble.js"></script>
                
                
                <script src="map.js" type="text/javascript">
                </script>
                <script src="dbMap.js" type="text/javascript">
                </script>
                
                <style>
                    #map_canvas {
                        margin: 0;
                        padding: 0;
                        height: 900px;
                        width: 100%;
                    }
                    .imgStatus{
                        width: 20px;
                        height:30px;
                        position:absolute;
                        top:5px;
                        
                    }
                    .status{
                        width: 130px;
                        height:40px;
                        position:absolute;
                        line-height: 2.5;
                        color:white;
                    }
                .megaBut{
                    margin-left: auto;
                    margin-right: auto;
                    table-layout: fixed;
                    border-collapse: collapse;
                     position:relative
                }
                
                </style>
             

            </head>
                    <body>
                        <div id="header">
                            <div id="page">
                                <div style="margin:0 auto;">
                                    <div id="Name">foss world monitor</div>
                                    <img class="imgStatus" src="icon_passed-2.png" style="right:285px" alt="Passed">
                                    <div id="passed" class="status" style="right:150px">Pas</div>
                                    <img class="imgStatus" src="icon_warning-2.png" style="right:195px" alt="Warning">
                                    <div id="warning" class="status" style="right:60px">War</div>
                                    <img class="imgStatus" src="icon_error-2.png" style="right:105px" alt="Error">
                                    <div id="error" class="status" style="right:-30px">Err</div>
                                    <button class="megaBut" style="left:380px; top:15px"  onclick="showAll()" >Show All</button>
                                    <button class="megaBut" style="left:380px; top:15px" onclick="showPas()">Show Passed</button>
                                    <button class="megaBut" style="left:380px; top:15px" onclick="showWar()">Show Warnings</button>
                                    <button class="megaBut" style="left:380px; top:15px" onclick="showEr()">Show Errors</button>
                                </div>
                            </div>
                            
                        </div>
                        
                     
                        
                        <div id="map_canvas">
                        
                        
                        </div>
                    </body>
                  
</html>